<script lang="ts" setup>
import {computed, h, onMounted, reactive, ref} from 'vue'
import {LoadingOutlined} from "@ant-design/icons-vue";

import { storeToRefs } from 'pinia'
import {useHeroStore} from "@/stores/hero";
const heroStore = useHeroStore()
const { heroList,heroVer } = storeToRefs(heroStore)
const { setHeroList } = heroStore

interface FilterAttrItem{ attr: string ; sort: number; }
interface FilterAttr {
    [key: string]: FilterAttrItem;
}

const indicator = () => {
    return h(LoadingOutlined, {
        style: {
            fontSize: '24px',
        },
        spin: true,
    })
};



let load = ref(false)
let recruit = ref(true) //公开招募
let avatar = ref(false) //显示头像


async function loadVer() {
    let {ver} = await fetch(import.meta.env.VITE_ROOT_BASE+'data/ver.json').then(res => {
        return res.json()
    })
    return ver
}

async function loadHero() {
    load.value = true
    let heros = await fetch(import.meta.env.VITE_ROOT_BASE+'data/hero.json').then(res => {
        return res.json()
    }).finally(() => {
        load.value = false
    })
    heros.sort((a:any,b:any)=>{
        if (a.rarity > b.rarity) {
            return -1;
        } else if (a.rarity < b.rarity) {
            return 1;
        } else {
            return 0;
        }
    })
    setHeroList(heros)
}

onMounted(async () => {
    let tempVer = await loadVer();
    if(!heroList.value.length || !heroVer.value || heroVer.value < tempVer){
        heroVer.value = tempVer
        loadHero();
    }
})


let filterTags=ref<Array<string>>([])
let filterStar=ref<Array<string>>(['2','3','4'])

//星级
let Stars = reactive({
    0:'1★',
    1:'2★',
    2:'3★',
    3:'4★',
    4:'5★',
    5:'6★'
})
let careers:string[] = ['先锋', '近卫', '狙击', '重装', '医疗', '辅助', '术师','特种']//职业
let aptitudes:string[] = ['新手','资深干员','高级资深干员']//资质
let positions:string[] = ['远程位','近战位']
let abilitys:string[] = [
    "治疗",
    "支援",
    "输出",
    "群攻",
    "减速",
    "生存",
    "防护",
    "削弱",
    "位移",
    "控场",
    "爆发",
    "召唤",
    "快速复活",
    "费用回复",
    "支援机械",
]

function setFilterTag(tag:string){
    let index = filterTags.value.indexOf(tag);
    if(index > -1){
        filterTags.value.splice(index,1)
        return;
    }
    if(tag=='高级资深干员'){
        filterStar.value.push('5')
        filterStar.value = [...new Set(filterStar.value)]
    }
    if(filterTags.value.length > 5) return;
    filterTags.value.push(tag)
}
function setFilterStarTag(tag:string){
    let index = filterStar.value.indexOf(tag+'');
    if(index > -1){
        filterStar.value.splice(index,1)
        return;
    }
    filterStar.value.push(tag+'')
}
const filterAttr = computed(() => {
    if(!filterTags.value.length){
        return null
    }
    function getAttr(tag:string){
        if(careers.indexOf(tag) > -1){
            return 'class'
        }
        if(positions.indexOf(tag) > -1){
            return 'position'
        }
        if(abilitys.indexOf(tag) > -1){
            return 'tag'
        }
        if(aptitudes.indexOf(tag) > -1){
            if(tag == aptitudes[1]){
                return 'Star-4'
            }
            if(tag == aptitudes[2]){
                return 'Star-5'
            }
            return 'tag'
        }
    }
    let i = 0
    let tempFilterAttr:FilterAttr = {} //需要过滤的属性
    for (const tag of filterTags.value) {
        let attr = getAttr(tag)
        if(!(tag in filterAttr)){
            tempFilterAttr[tag] = {
                attr,
                sort:2**i
            } as FilterAttrItem
            i++;
        }
    }
    return tempFilterAttr
})

const showHeros = computed(() => {
    if(!filterStar.value.length){
        return null;
    }
    function checkAttr(hero:Hero.Item,attr:FilterAttrItem,tag:string){
        if(recruit.value && !hero['approach'].split(',').map(item=>item.trim()).includes('公开招募')){
            return false
        }
        //星 判断
        if(!filterStar.value.includes(hero.rarity+'')){
            return  false;
        }
        if(['class','position'].includes(attr.attr)){
            return hero[attr.attr as keyof typeof hero] == tag
        }
        if('tag' == attr.attr ){
            return hero.tag.split(' ').includes(tag)
        }
        if('Star-4' == attr.attr){
            return hero.rarity == 4
        }
        if('Star-5' == attr.attr){
            return hero.rarity  == 5
        }
        return false;
    }
    let tempHeros:Hero.TempHeros={}
    heroList.value.map(hero=>{
        let has=[];
        for (const attr in filterAttr.value) {
            if(checkAttr(hero,filterAttr.value[attr],attr)){
                has.push(filterAttr.value[attr].sort);
            }
        }
        if(has.length){
            let last = null
            for (const hasKey in has) {
                if(!(has[hasKey] in tempHeros)){
                    tempHeros[has[hasKey]] = {
                        key:has[hasKey],
                        list:[]
                    } as Hero.ShowHeros;
                }
                tempHeros[has[hasKey]].list.push(hero)

                last = last ? last | has[hasKey] : has[hasKey];
                if(last != has[hasKey]){
                    if(!(last in tempHeros)){
                        tempHeros[last] = {
                            key:last,
                            list:[]
                        };;
                    }
                    tempHeros[last].list.push(hero)
                }
            }
        }
    })
    let tempArr:Hero.ShowHeros[] = (Object.values(tempHeros) as Hero.ShowHeros[]).sort((a:Hero.ShowHeros, b:Hero.ShowHeros) => a.key - b.key)
    tempArr.reverse()
    return  tempArr
})

function showGroupTag(key:number){
    let tags=[]
    for (const keyKey in filterAttr.value) {
        if((filterAttr.value[keyKey].sort & key)==filterAttr.value[keyKey].sort){
            tags.push( keyKey)
        }
    }
    return tags
}

</script>

<template>
    <a-spin :indicator="indicator" :spinning="load">
        <a-card size="small">
            <div class="filter-btn-box">
                <div class="btn-box Star-btn-box" >
                    <a :class="[ filterStar.indexOf(key+'')>-1 ? 'on':'',`Star-${key}` ]" @click="setFilterStarTag(key+'')"  v-for="(Star,key) in Stars">{{ Star }}</a>
                </div>
                <div class="btn-box" >
                    <template v-for="(aptitude,index) in aptitudes">
                        <a :class="[ filterTags.indexOf(aptitude)>-1 ? 'on':'' ]" @click="setFilterTag(aptitude)">{{ aptitude }}</a>
                    </template>
                </div>
                <div class="btn-box">
                    <template v-for="(position,index) in positions">
                        <a :class="[ filterTags.indexOf(position)>-1 ? 'on':'' ]" @click="setFilterTag(position)">{{ position }}</a>
                    </template>
                </div>
                <div class="btn-box">
                    <template v-for="(career,index) in careers">
                        <a :class="[ filterTags.indexOf(career)>-1 ? 'on':'' ]" @click="setFilterTag(career)">{{ career }}</a>
                    </template>
                </div>
                <div class="btn-box">
                    <template v-for="(ability,index) in abilitys">
                        <a :class="[ filterTags.indexOf(ability)>-1 ? 'on':'' ]" @click="setFilterTag(ability)">{{ ability }}</a>
                    </template>
                </div>
            </div>
        </a-card>
        <a-card size="small" bodyStyle="padding:0 12px">
            <div style="display: flex;justify-content: space-between;font-size: 12px">
                <div style="display: flex;font-size: 12px">
                    <a-button style="padding: 0;" type="link" @click="avatar=!avatar">{{ avatar ?'隐藏':'显示' }}头像</a-button>
                    <a-button type="link" @click="recruit=!recruit"  style="margin-left: 15px;padding: 0;">{{ recruit ?'显示':'隐藏' }}非公开招募干员</a-button>
                </div>
                <div style="display: flex;font-size: 12px;align-items: center">
                    <a @click="filterTags=[]">重置</a>
                </div>
            </div>

        </a-card>

        <div>
            <a-row >
                <a-col  :xs="8" :sm ="4" style="padding-left: 20px">
                    词条#
                </a-col>
                <a-col  :xs="16" :sm ="20">
                    可能出现
                </a-col>
            </a-row>
        </div>

        <a-card size="small">
            <a-row v-for="(heros,key) in showHeros" style="margin: 5px 0px; border-bottom: 1px solid #e5e5e5;padding-bottom: 5px">
                <a-col  :xs="6" :sm="4">
                    <div style="display: flex;flex-flow: row wrap;">
                        <div style="width:60px; text-align:center;font-size: 12px;display: inline-block;background: #8e8e8e; color: #fff;padding: 1px 5px;margin: 2px 2px" v-for="tag in showGroupTag(heros.key)">{{ tag }}</div>
                    </div>
                </a-col>
                <a-col  :xs="18" :sm="20" class="hero-list-box">
                    <template v-for="(hero) in heros.list">
                        <a :class="[`Star-${hero.rarity}`]">
                            <a-avatar v-if="avatar" :size="20" :src="hero.icon" />
                            {{ hero.cn }}
                        </a>
                    </template>
                </a-col>
            </a-row>
        </a-card>

    </a-spin>
</template>
<style scoped lang="less">



.filter-btn-box{
    a{
        background: #d9d9d9;
        color: #333333;
        font-size: 12px;
        padding: 2px 6px;
        &.on{
            background: #1890ff;
            color: #fff;
        }
    }
    .Star-btn-box{
        .on{
            &.Star-0{ background: #757575;}
            &.Star-1{ background: #653e3e;}
            &.Star-2{ background: #289d00;}
            &.Star-3{ background: #2578a2;}
            &.Star-4{ background: #985100;}
            &.Star-5{ background: #be2300;}
        }
    }
}
.btn-box{
    margin-bottom: 4px;
    &:last-child{
        margin-bottom: 0;
    }
    a{
        margin:2px 2px;
        display: inline-block;
    }

}
.hero-list-box{
    .Star-0{ background: #757575;}
    .Star-1{ background: #653e3e;}
    .Star-2{ background: #289d00;}
    .Star-3{ background: #2578a2;}
    .Star-4{ background: #985100;}
    .Star-5{ background: #be2300;}

    a{
        color:#fff;
        margin:2px ;
        background: #dcdcdc;
        padding: 3px 5px;
        font-size: 12px;
        display: inline-block;
    }

}
</style>